<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" label-position="left">
      <br/> <br/>
      <el-form-item>
        <el-col :span="24">
          <el-form-item label="ocr识别">
            <el-upload ref="ocrUpload" :file-list="ocrUploadfileList" :show-file-list="false"
                       :before-upload="ocrUploadBeforeUpload" :http-request="ocrUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击识别</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="发票类型" prop="title">
            <el-input v-model="formData.type" placeholder="发票类型" :disabled='false'
                      :style="{width: '70%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票号码" prop="number">
            <el-input v-model="formData.number" :disabled='false' :style="{width: '70%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="开票日期" prop="date">
            <el-input v-model="formData.date" placeholder="开票日期" :disabled='false'
                      :style="{width: '70%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>购买方信息</span>
          </div>
          <div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="公司名称" prop="buyerName" label-width="30%">
                  <el-input v-model="formData.buyerName" placeholder="公司名称" :disabled='false'
                            :style="{width: '70%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="纳税人识别号-统一社会信用代码" label-width="30%" prop="buyerCode">
                  <el-input v-model="formData.buyerCode" placeholder="纳税人识别号-统一社会信用代码"
                            :disabled='false'
                            :style="{width: '70%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>销售方信息</span>
          </div>
          <div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="公司名称" prop="sellerName" label-width="30%">
                  <el-input v-model="formData.sellerName" placeholder="公司名称" :disabled='false'
                            :style="{width: '70%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="纳税人识别号-统一社会信用代码" label-width="30%" prop="sellerCode">
                  <el-input v-model="formData.sellerCode" placeholder="纳税人识别号-统一社会信用代码"
                            :disabled='false'
                            :style="{width: '70%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-table
          :data="formData.detailList"
          style="width: 90%">
          <el-table-column
            prop="name"
            label="项目名称"
            width="230">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.name" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="model"
            label="规格型号"
            width="140">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.model" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.model}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            width="70">
            <template v-slot="scopeProp">
              <div v-if="editingRow === scopeProp.$index">
                <el-input v-model="scopeProp.row.unit" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scopeProp.$index)">
                {{ scopeProp.row.unit}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量"
            width="70">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.count" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.count}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="200">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.price" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.price}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="amount"
            label="金额"
            width="130">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.amount" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.amount}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="taxRate"
            label="税率-征收率"
            width="100">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.taxRate" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.taxRate}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="taxAmount"
            label="税额"
            width="120">
            <template slot-scope="scope">
              <div v-if="editingRow === scope.$index">
                <el-input v-model="scope.row.taxAmount" @blur="finishEdit"></el-input>
              </div>
              <div v-else @click="startEdit(scope.$index)">
                {{ scope.row.taxAmount}}
              </div>
            </template>
          </el-table-column>
          <template v-slot:append>
            <el-form-item label="合计" prop="amount" label-width="auto" :style="{float: 'right','margin-top': '10px','margin-bottom': '10px'}">
              <el-input v-model="formData.amount" placeholder="合计" :disabled='false'
                        :style="{width: '40%'}"></el-input>
            </el-form-item>
          </template>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-col :span="12">
          <el-form-item label="价税合计" prop="totalAmountString" label-width="20%">
            <el-input v-model="formData.totalAmountString" placeholder="价税合计" :disabled='false'
                      :style="{width: '70%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价税合计(小写)" prop="totalAmount" label-width="20%">
            <el-input v-model="formData.totalAmount" placeholder="价税合计(小写)" :disabled='false'
                      :style="{width: '70%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="6">
          <el-form-item label="开票人" prop="drawer">
            <el-input v-model="formData.drawer" placeholder="开票人" :disabled='false'
                      :style="{width: '70%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <div class="formAction">
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {ocrIdentifyWithHotel, ocrSubmitWithHotel} from "@/api/invoice/invoice";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        // ocrUpload:'',
        title: '',  // 发票类型
        number: '',
        date: '',
        buyerName: '',   //购买方公司名
        buyerCode: '',  //购买方税号
        sellerName: '',  //销售方公司名
        sellerCode: '',   //销售方税号
        amount: '',   //金额合计
        taxAmount: '',  //税额
        totalAmountString: '',   //价税合计（中文）
        totalAmount: '',  //价税合计（小写）
        drawer: '',  //开票人
        detailList: {    //表格数据
          name: '',
          model: '',
          unit: '',
          count: '',
          price: '',
          amount: '',
          taxRate: '',
          taxAmount: '',
        }
      },
      rules: {
        type: [],
        number: [],
        date: [],
        buyerName: [],
        buyerCode: [],
        sellerName: [],
        sellerCode: [],
        amount: [],
        taxAmount: [],
        totalAmountString: [],
        totalAmount: [],
        drawer: [],
        detailList: {
          name: [],
          model: [],
          unit: [],
          count: [],
          price: [],
          amount: [],
          taxRate: [],
          taxAmount: [],
        }
      },
      ocrUploadfileList: [],
      editingRow: null, // 表格：当前编辑的行索引
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.formData.userId = 1;
        ocrSubmitWithHotel(this.formData).then(response => {
          alert('提交成功')
          this.resetForm();
        }).catch(() => {
          alert('提交失败')
        })
      })
    },
    resetForm() {
      // this.$refs['elForm'].resetFields()
      this.formData = {};
    },
    ocrUploadBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      return isRightSize
    },
    ocrUpload(options) {
      const formData = new FormData();
      formData.append('file', options.file);

      ocrIdentifyWithHotel(formData).then(response => {
        this.formData = response;
      }).catch(() => {
        alert('ocr识别失败')
      })

    },
    startEdit(index) {
      this.editingRow = index;
    },
    finishEdit() {
      this.editingRow = null;
      // 这里可以添加代码来保存编辑后的数据
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

.box-card {
  width: 80%;
  position: relative;
  left: 30%;
  transform: translate(-30%, 0%);
}

.formAction {
  position: relative;
  left: 30%;
  transform: translate(10%, 0%);
}

</style>
